<template>
  <el-tabs v-model="activeName" type="border-card" @tab-click="tabChange">
    <el-tab-pane
      v-for="item of tabMapOptions"
      :key="item.name"
      :label="item.label"
      :name="item.name"
    >
      <keep-alive>
        <component
          v-if="item.name === currentTab"
          :is="currentTab"
          :current-tab.sync="currentTab"
          :summary-list="summaryList"
          @getSummaryInfo="getSummaryInfo"/>
      </keep-alive>
    </el-tab-pane>
  </el-tabs>
</template>
<script>
import handlerSummary from './models/handler'
import testerSummary from './models/tester'
import summaryApi from '@/api/production/summaryReview'
export default {
  name: 'SummaryReview',
  components: { handlerSummary, testerSummary },
  data() {
    return {
      activeName: 'handlerSummary',
      currentTab: 'handlerSummary',
      summaryList: {},
      tempTab: []
    }
  },
  computed: {
    tabMapOptions() {
      return this.tempTab
    }
  },
  created() {
    this.getSummaryInfo()
  },
  mounted() {},
  methods: {
    async getSummaryInfo() {
      const { eqp1Id, eqp2Id, eventId } = this.$route.params
      const res = await summaryApi.getSummaryInfo({ eqp1Id, eqp2Id, eventId })
      this.summaryList = res.data
      // 下次再优化 有点傻这里的代码
      const tabs = [{
        label: 'Handlers Summary',
        name: 'handlerSummary'
      }, {
        label: 'tester Summary',
        name: 'testerSummary'
      }]
      if (res.data.handlerSummary.eqpId && res.data.testerSummary.eqpId) {
        this.tempTab = tabs
        this.activeName = 'handlerSummary'
        this.currentTab = 'handlerSummary'
      } else if (res.data.handlerSummary.eqpId) {
        this.tempTab = [tabs[0]]
        this.activeName = 'handlerSummary'
        this.currentTab = 'handlerSummary'
      } else if (res.data.testerSummary.eqpId) {
        this.tempTab = [tabs[1]]
        this.activeName = 'testerSummary'
        this.currentTab = 'testerSummary'
      }
    },
    tabChange(tab) {
      this.currentTab = tab.paneName
    }
  }
}
</script>
